JavaScript AJAX

第 12 屆 iThome 鐵人賽

DAY 4

自我挑戰組

javascript 學習筆記系列第 4 篇

12th鐵人賽

pigbrother

2020-09-19 23:59:49

1054 瀏覽

分享至

一段網址從瀏覽器出發

網址正式名稱為URL(Uniform Resource Locator)統一資源定位符, 完整包含protocol://username:password@hostname:port/path?query#fragment,
一般username:password@可省略, 一般所稱的Web即全球資訊網(World Wide Web)也簡稱www, 即是使用http協議, http server端預設是80 port, hostname可以是網域名也可以是IP位置, 網域名經由DNS查出IP, 如果hostname是IP位置在瀏覽器輸出時就可以經過TCP三次交握與server端建立連線, 連線建立後利用http協議傳送資料, 此時瀏覽器會發出get的request, 然後瀏覽器會將結果response給瀏覽器, 最後斷開連線, 所以每一次瀏覽器發送網址的請求都會造成整個畫面重新渲染, 這樣使用者體驗不佳, 也會造成連線資源的浪費

AJAX (Asynchronous JavaScript and XML) 登場

微軟首先在IE 4.0允許客戶端使用指令碼傳送HTTP請求, 當2005年google已經在眾多產品使用Ajax技術, 這時客戶端可以在不刷新整個頁面下, 發出HTTP request來得新資料來更新局部畫面

利用nodejs架設簡單http server

// server.js
let http = require("http");
// url模組可以用來解析URL
let url = require("url");
// file sysytem模組 用來處理讀寫
let fs = require("fs");
// 建立http server
let server = http.createServer();
// 此http server 監聽9000 port
server.listen(9000, () => {
  console.log("http server 於9000 port啟動成功");
});
// 監聽request事件,callback function的兩個參數, req是接收到的request, res是回應的response
server.on("request", (req, res) => {
  // 將request的url解析
  let urls = url.parse(req.url, true);
  // 如果請求的pathname是 /gets 回應給Hello
  if (urls.pathname == "/gets") {
    res.end("Hello");
    // 如果請求是其他就將其檔案讀取, 如果沒有出錯就將讀取結果返回
  } else {
    fs.readFile(`.${urls.pathname}`, (err, data_str) => {
      if (!err) {
        res.end(data_str);
      } else {
        console.log(err);
        res.end("");
      }
    });
  }
});

Ajax使用

使用瀏覽器提供的Web API建立XMLHttpRequest物件

<!-- ajaxget.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="發送" id="btn" />
    <script>
      let btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        let xhr = new XMLHttpRequest();
        xhr.open("get", "http://127.0.0.1:9000/gets");
        xhr.setRequestHeader("content-type", "mm/form-data");
        xhr.send();
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            alert(xhr.responseText);
            alert(xhr.status);
          }
        };
      });
    </script>
  </body>
</html>